<template>
	<view class="container" :style="{'--bg': common.appStyle.home_nav_color}">
		<view class="card">
			<view class="header">
				<view class="img-bg avatar" :style="{ background: `url(${$wanlshop.oss(seedingData.user.avatar)})` }"></view>
				<text class="name">{{ seedingData.user.nickname ? seedingData.user.nickname : seedingData.user.username }}</text>
				<wanl-rate :current="seedingData.score" :disabled="true" />
				<text style="color: #fd8c00;">{{ seedingData.score }}</text>
			</view>

			<view class="main">
				<view class="content">{{ seedingData.content }}</view>
				<view class="images">
					<view class="img-bg image" v-for="(item, index) in seedingData.images" :key="index" :style="{ background: `url(${$wanlshop.oss(item)})` }"></view>
				</view>
			</view>

			<view class="bottom">
				<!-- 点赞 -->
				<view :class="{ 'wanl-orange': seedingData.liked }" @tap="handleLike">
					<text class="margin-right-xs" :class="[seedingData.liked ? 'wlIcon-dianzan1' : 'wlIcon-dianzan11']"></text>
					{{ seedingData.like ? seedingData.like : 0 }}
				</view>
			</view>
		</view>

		<!-- 猜你喜欢 -->
		<view class="wanl-you-like margin-bottom-sm" :style="{ backgroundImage: 'url(' + $wanlshop.oss(common.appStyle.guess_you_like_icon) + ')' }"></view>
		<wanl-product :dataList="likeData" />
	</view>	
</template>

<script>
import {
	mapState
} from 'vuex';
export default {
	data() {
		return {
			seedingData: {},
			page: null,
			likeData: [],
		};
	},
	computed: {
		...mapState(['common'])
	},
	onLoad(option) {
		this.page = this.getOpenerEventChannel();
		if (option.id) {
			this.page.on('sentSeedingData', (data) => {
				this.seedingData = data.data;
				// console.log('this.seedingData', this.seedingData)
				this.loadlikeData();
			});
		} else {
			this.$wanlshop.msg('非法进入页面');
			setTimeout(() => {
				this.$wanlshop.on('/pages/index')
			}, 500);
		}
	},
	methods: {
		// 点赞 
		async handleLike() {
			if (this.$store.state.user.isLogin) {
				this.$api.post({
					url: '/wanlshop/user/likeData?id=' + this.seedingData.id,
					success: res => {
						// console.log('res', res)
						if (res.data) {
							this.seedingData.like += 1;
						} else {
							this.seedingData.like -= 1;
						}
						this.seedingData.liked = res.data;
					}
				});

			} else {
				this.$wanlshop.to('/pages/user/auth/name');
			}
		},
		// 滚动底部加载猜你喜欢
		async loadlikeData() {
			this.$api.get({
				url: '/wanlshop/product/likes?pages=user',
				data: {
					page: this.current_page
				},
				success: res => {
					this.likeData = this.reload ? res.data : this.likeData.concat(res.data); //评论数据 追加
					this.current_page = res.current_page; //当前页码
					this.last_page = res.last_page; //总页码
					this.status = res.total == 0 ? 'noMore' : 'more';
				}
			});
		},
	},
}
</script>
<style>
page {
	height: 100%;
}
.product_warter {
	margin: 0rpx !important;
}
.wanl-rate-box .wanl-icon {
	font-size: 24rpx !important;
}
</style>
<style lang="scss" scoped>
page {
	//background-color: #fafafa;
}

.container {
	min-height: 100%;
	padding: 20rpx;
	box-sizing: border-box;
	background-color: var(--bg);
	.img-bg {
		background-size: cover !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
	}

	.card {
		padding: 30rpx;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 18rpx;
		overflow: hidden;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);

		.header {
			display: flex;
			gap: 20rpx;
			align-items: center;
			margin-bottom: 20rpx;

			.avatar {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}

			.name {
				font-size: 32rpx;
			}
		}

		.main {
			width: 100%;

			.content {
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				margin-bottom: 3dvh;
			}

			.images {
				margin: 24rpx 0;
				width: 100%;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 10rpx;

				.image {
					padding-top: 100%;
					border-radius: 18rpx;
				}
			}
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
}
</style>
